<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

<h:head>
    <f:facet name="first">
        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
        <meta name="apple-mobile-web-app-capable" content="yes"/>
    </f:facet>
    <title>PrimeFaces Ecuador</title>
    <script type="text/javascript">
        hideMenu = function () {
            var menu = $('#landing-menu');
            menu.removeClass('landing-menu-active');
            $(document.body).removeClass('landing-masked').children('.landing-wrapper').children('.layout-mask').remove();
        }

        showMenu = function () {
            var menu = $('#landing-menu');
            menu.addClass('landing-menu-active');
            $(document.body).addClass('landing-masked').children('.landing-wrapper').append('<div class="layout-mask"></div>');
        }

        $(function () {
            $('#menu-btn').on('click', function (e) {
                var menu = $('#landing-menu');
                if (menu.hasClass('landing-menu-active')) {
                    hideMenu();
                } else {
                    showMenu();
                }

                e.preventDefault();
            });

            $('#landing-menu').find('a').on('click', function (e) {
                hideMenu();
                e.preventDefault();
            });
        });
    </script>
</h:head>

<h:body styleClass="landing-body">
    <div class="landing-wrapper">
        <div id="header">
            <div class="header-top">
                <div class="p-grid">
                    <a id="menu-btn" href="#" class="menu-button-mobile">
                        <p:graphicImage name="images/icon-menu.svg" library="ecuador-layout"/>
                    </a>
                    <div class="p-col-3 p-md-3 p-lg-3 logo-container">
                        <a href="#" class="logo">
                            <p:graphicImage name="images/ecuador-logo.png" library="ecuador-layout"/>
                        </a>
                    </div>

                    <div class="p-col-9 p-md-9 p-lg-9 menu-container">
                        <ul id="landing-menu">
                            <li>
                                <a href="#home">Home</a>
                            </li>
                            <li>
                                <a href="#features">Features</a>
                            </li>
                            <li>
                                <a href="#news">News</a>
                            </li>
                            <li>
                                <a href="#pricing">Pricing</a>
                            </li>
                            <li>
                                <a href="#multimedia">Multimedia</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="header-content animation-element slide-bottom">
                <div class="header-bg"><span>PrimeFaces Presents</span></div>
                <div class="header-bg"><span>Ecuador</span></div>
                <h2 style="line-height: 1.5">Modern and elegant responsive application template with a premium look
                    for PrimeFaces components.</h2>
                <div>
                    <p:button class="landing-button" outcome="dashboard" value="Learn More"/>
                </div>
            </div>
        </div>

        <div id="features">
            <div>
                <div class="p-grid">
                    <div class="p-col-12 p-md-12 p-lg-4">
                        <div class="features-content">
                            <p:graphicImage name="images/icon-responsive.png" library="ecuador-layout"/>
                            <h3>RESPONSIVE LAYOUT</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
                        </div>
                    </div>
                    <div class="p-col-12 p-md-12 p-lg-4">
                        <div class="features-content">
                            <p:graphicImage name="images/icon-design.png" library="ecuador-layout"/>
                            <h3>MODERN DESIGN</h3>
                            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                        </div>
                    </div>
                    <div class="p-col-12 p-md-12 p-lg-4">
                        <div class="features-content">
                            <p:graphicImage name="images/icon-code.png" library="ecuador-layout"/>
                            <h3>CLEAN CODE</h3>
                            <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="news">
            <div>
                <div class="p-grid">
                    <div class="p-col-12 p-md-12 news-content">
                        <h2>PrimeFaces Premium Template</h2>
                        <p>
                            Take advantage of media's most prominent business trend, and empowers your internal advertising teams.
                        </p>
                        <p:button id="promotionButton" value="Learn More"></p:button>
                    </div>
                </div>
            </div>
        </div>

        <div id="pricing">
            <div>
                <div class="p-grid">
                    <span class="section-header">Pricing</span>
                    <div class="p-col-12">
                        <div class="p-grid">
                            <div class="p-col-12 p-md-12 p-lg-4 pricing-container">
                                <div class="price-type">
                                    <div class="price-header">
                                        <h3>BEGINNER</h3>
                                        <span class="price-for">$5 per month</span>
                                    </div>
                                    <div class="pricing-bottom">
                                        <div>
                                            <ul>
                                                <li>Responsive</li>
                                                <li>Push Messages</li>
                                            </ul>
                                        </div>
                                        <p:button outcome="/dashboard" value="Buy Now"/>
                                    </div>
                                </div>
                            </div>
                            <div class="ui-g-12 ui-md-12 ui-lg-4 pricing-container">
                                <div class="price-type">
                                    <div class="price-header">
                                        <h3>PROFESSIONAL</h3>
                                        <span class="price-for">$10 per month</span>
                                    </div>
                                    <div class="pricing-bottom">
                                        <div>
                                            <ul>
                                                <li>Responsive</li>
                                                <li>Push Messages</li>
                                                <li>10 Support Tickets</li>
                                                <li>Free Shipping</li>
                                            </ul>
                                        </div>
                                        <p:button outcome="/dashboard" value="Buy Now"/>
                                    </div>
                                </div>
                            </div>
                            <div class="p-col-12 p-md-12 p-lg-4 pricing-container">
                                <div class="price-type">
                                    <div class="price-header">
                                        <h3>ENTERPRISE</h3>
                                        <span class="price-for">Get a quote</span>
                                    </div>
                                    <div class="pricing-bottom">
                                        <div>
                                            <ul>
                                                <li>Responsive</li>
                                                <li>Push Messages</li>
                                                <li>10 Support Tickets</li>
                                                <li>Free Shipping</li>
                                                <li>Unlimited Space</li>
                                            </ul>
                                        </div>

                                        <p:button outcome="/dashboard" value="Get a Quote"/>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="multimedia">
            <div>
                <div class="p-col-12 p-md-12 video-header">
                    <span class="section-header">Multimedia</span>
                    <span>Duis nec lobortis massa, sed facilisis lorem. In hac habitasse platea dictumst. </span>
                </div>
                <div class="video-container">
                    <iframe src="https://www.youtube.com/embed/B_lYGUtCd0g" frameborder="0" width="560"></iframe>
                </div>
            </div>
        </div>

        <div id="footer">
            <div class="p-grid">
                <div class="p-col-12 p-md-12 p-lg-4 footer">
                    <div class="logo">
                        <p:graphicImage name="images/ecuador-orange-logo.png" library="ecuador-layout"/>
                    </div>
                    <span class="p-col-12">Premium PrimeFaces Application Template</span>
                </div>
                <div class="p-col-12 p-md-12 p-lg-8">
                    <div id="landing-menu-footer">
                        <div class="p-grid">
                            <div class="p-col-12 p-md-6 p-lg-3 landing-box">
                                <span>OVERVIEW</span>

                                <a href="#primefaces">Why PrimeFaces</a>

                                <a href="#prime">Who Uses PrimeFaces</a>

                                <a href="#testimonials">Testimonials</a>

                                <a href="#licence">License</a>

                            </div>
                            <div class="p-col-12 p-md-6 p-lg-3 landing-box">
                                <span>DEMOS</span>

                                <a href="#faces">PrimeFaces</a>

                                <a href="#ng">PrimeNG</a>

                                <a href="#react">PrimeReact</a>

                                <a href="#ui">PrimeUI</a>

                            </div>
                            <div class="p-col-12 p-md-6 p-lg-3 landing-box">
                                <span>SUPPORT</span>

                                <a href="#options">Support Options</a>

                                <a href="#pro">PrimeFaces PRO</a>

                                <a href="#elite">PrimeFaces Elite</a>

                                <a href="#forum">Forum</a>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <h:outputStylesheet name="css/primeicons.css" library="ecuador-layout"/>
    <h:outputStylesheet name="css/primeflex.min.css" library="ecuador-layout"/>
    <h:outputStylesheet name="css/layout-#{guestPreferences.theme}.css" library="ecuador-layout"/>

    <script>
        //<![CDATA[
        var $this = this;

        $(document).ready(function () {
            $('html').animate({scrollTop: 0}, 1);
            $('body').animate({scrollTop: 0}, 1);
        });

        /* Scroll Animate */
        $('a[href*="#"]:not([href="#"])').click(function () {
            var target = $(this.hash);
            if (target.length) {
                $('html, body').animate({
                    scrollTop: target.offset().top
                }, 500);
                return false;
            }
        });

        //window and animation items
        var animation_elements = $.find('.animation-element');
        var web_window = $(window);

        //check to see if any animation containers are currently in view
        function check_if_in_view() {
            //get current window information
            var window_height = web_window.height();
            var window_top_position = web_window.scrollTop();
            var window_bottom_position = (window_top_position + window_height);

            //iterate through elements to see if its in view
            $.each(animation_elements, function () {
                //get the element sinformation
                var element = $(this);
                var element_height = $(element).outerHeight();
                var element_top_position = $(element).offset().top;
                var element_bottom_position = (element_top_position + element_height);

                //check to see if this current container is visible (its viewable if it exists between the viewable space of the viewport)

                if ((element_top_position <= window_bottom_position)) {
                    element.addClass('in-view');
                }

            });
        }

        //on or scroll, detect elements in view
        $(window).on('scroll resize', function () {
            check_if_in_view()
        })
        //trigger our scroll event on initial load
        $(window).trigger('scroll');
        //]]>
    </script>
</h:body>

</html>